<template>
  <div class="app-container">
    <el-card class="mb20" v-show="isShow">
      <el-form :model="listQF" inline>
        <el-form-item label="客户名称">
          <el-select v-model="listQF.customerId" placeholder="客户名称">
            <el-option
              v-for="item in customerList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同日期">
          <el-date-picker
            v-model="listQF.signAttr"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input v-model="listQF.name" placeholder="物料名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button @click="ResetList">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button type="success" @click="exprotExcel">导出</el-button>
      <el-button class="el-icon-search" @click="isShow = !isShow"></el-button>
      <el-button class="el-icon-refresh" @click="getList"></el-button>
      <el-table :data="list">
        <el-table-column
          v-for="item in listColumn"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
        ></el-table-column>
      </el-table>
      <el-pagination
        style="display: flex; justify-content: right"
        @size-change="PagerLimitChange"
        @current-change="PagerPageChange"
        :current-page="pager.page"
        :page-sizes="[2, 10, 30, 40]"
        :page-size="pager.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.total"
      >
      </el-pagination>
    </el-card>
    <el-dialog center :visible.sync="visible" title="导出" @close="close">
      <p style="text-align: center">是否导出所有销售台账数据项？</p>
      <template #footer>
        <el-button @click="close">取消</el-button>
        <el-button @click="submitExport" type="primary">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getSaleReturnList, editSaleReturn, addSaleReturn, delSaleReturn } from '@/api_zc/scm/sale-management/sale-return'
import { getCustomerList } from '@/api_zc/task/sale-order-approve'
import { getSaleLedgerList } from '@/api_zc/scm/sale-report/sale-ledger'
export default {
  mounted () {
    this.getList()
    this.getUnityList()
  },
  data () {
    return {
      pager: {
        limit: 10,
        page: 1,
        total: 0
      },
      list: [],
      isShow: true,
      listColumn: [
        {
          label: '合同id',
          prop: 'id'
        },
        {
          label: '合同编号',
          prop: 'contractNo'
        },
        {
          label: '客户名称',
          prop: 'customer.name'
        },
        {
          label: '合同金额',
          prop: 'totalAmount'
        },
        {
          label: '签订日期',
          prop: 'signDate'
        },
        {
          label: '物料名称',
          prop: 'name'
        },
        {
          label: '型号',
          prop: 'model'
        },
        {
          label: '规格',
          prop: 'specification'
        },
        {
          label: '单价',
          prop: 'price'
        },
        {
          label: '订货数量',
          prop: 'quantity'
        },
        {
          label: '应收金额',
          prop: 'amount'
        },
        {
          label: '退款金额',
          prop: 'refundAmount'
        },
      ],
      listQF: {
        name: '',
        customerId: '',
        signStartDate: '',
        signEndDate: '',
        signAttr: []
      },
      visible: false,
      customerList: []
    }
  },
  methods: {
    async getUnityList () {
      const { data: { content } } = await getCustomerList()
      this.customerList = content
    },
    async getList () {
      if (!this.listQF.signAttr) {  //可修改
        return
      }
      ;[this.listQF.signStartDate, this.listQF.signEndDate] = this.listQF.signAttr  //可修改
      const { data: { total, content } } = await getSaleLedgerList({ ...this.listQF, page: this.pager.page, limit: this.pager.limit })
      this.list = content
      this.pager.total = total
    },
    ResetList () {
      Object.assign(this.listQF, this.$options.data().listQF)
      this.getList()
    },
    PagerLimitChange (val) {
      this.pager.limit = val
      this.getList()
    },
    PagerPageChange (val) {
      this.pager.page = val
      this.getList()
    },
    exprotExcel () {
      this.visible = true
    },
    close () {
      this.visible = false
    },
    submitExport () {
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = this.listColumn.map(item => item.prop)
        const filterVal = this.listColumn.map(item => item.prop)
        const list = this.list
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '销售台账数据',
        })
      })
      this.visible = false
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'customer.name') {
          return v.customer.name
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

<style>
</style>